11. Typography
Typography Heading
Typography
ND001 C01 L02 06 Typography With CSS
Text alignment
Text alignment
The aptly named text-align property defines the alignment of the text in an HTML element.
p {
text-align: left;
}
Other accepted values are right, center, or justify.
Quiz 8 - Text alignment
SOLUTION:
- ``
- ``
- `
`
Underlined Text
Underlined Text
The text-decoration property determines whether text is underlined or not. By setting it to none, we can remove the default underline from all of our links. We’ll discuss link styles in-depth later on.
a {
text-decoration: none;
}
Deleted Text
Deleted Text
The other common value for text-decoration is line-through to strike out “deleted” text. But, remember that meaning should always be conveyed through HTML—not CSS. It’s better to use the <ins>
and <del>
elements instead of adding a line-through style to, say, an ordinary <p>
element.
Line Height
Line Height
Just as alignment isn’t an arbitrary decision, neither is the space between text. In this section, we’re concerned with the responsible use of three CSS properties:
margin-top
(orpadding-top
)margin-bottom
(orpadding-bottom
)line-height
The first two should be pretty familiar by now, and they define the vertical space between separate paragraphs. The new line-height
property determines the amount of space between lines in the same paragraph. In traditional typography, line-height
is called “leading” because printers used little strips of lead to increase the space between lines of text.
Quiz 9 - Line Height